<template>
  <a-modal
    v-model:visible="visible"
    draggable
    width="40%"
    @ok="onSubmit"
    @cancel="handleChangeVisible"
  >
    <template #title> {{ title }}</template>
    <a-row>
      <a-col :flex="1">
        <a-form
          :model="formModel"
          :label-col-props="{ span: 4 }"
          :wrapper-col-props="{ span: 17 }"
          label-align="left"
        >
          <a-row :gutter="16">
            <a-col :span="24">
              <a-form-item field="keyWord" label="关键字">
                <a-input
                  v-model="formModel.keyWord"
                  placeholder="请输入关键字"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-col>
      <a-col :flex="'86px'" style="text-align: right">
        <a-space direction="vertical" :size="18">
          <a-button type="primary" @click="search">
            <template #icon>
              <icon-search />
            </template>
            {{ $t('searchTable.form.search') }}
          </a-button>
        </a-space>
      </a-col>
    </a-row>
    <a-table
      row-key="id"
      :loading="loading"
      :data="renderData"
      :row-selection="rowSelection"
      :bordered="false"
      :pagination="false"
      @select="selectData"
    >
      <template #columns>
        <a-table-column title="名称" data-index="name" />
        <a-table-column title="手机号" data-index="phone" />
      </template>
    </a-table>
  </a-modal>
</template>

<script lang="ts" setup>
  import { TableRowSelection, TableData, Message } from '@arco-design/web-vue';
  import useLoading from '@/hooks/loading';
  import { ref, reactive } from 'vue';
  import { getUserByGroupId } from '@/api/user';

  const generateFormModel = () => {
    return {
      groupId: 'Flow_Auto_Deal_Robot',
      keyWord: '',
    };
  };
  const rowSelection = reactive<TableRowSelection>({
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false,
  });
  const { loading, setLoading } = useLoading();
  const renderData = ref<any>([]);
  const formModel = ref(generateFormModel());
  const visible = ref(false);
  const robotData = ref<any>([]);
  const emit = defineEmits(['userSelection']);

  defineProps({
    title: {
      type: String,
      default: '选择机器人',
    },
  });
  const fetchData = async (groupId: string, keyWord: string) => {
    setLoading(true);
    try {
      const { data } = await getUserByGroupId(groupId, keyWord);
      renderData.value = data;
    } catch (err) {
      // you can report use errorHandler or other
    } finally {
      setLoading(false);
    }
  };

  const search = () => {
    fetchData(formModel.value.groupId, formModel.value.keyWord);
  };

  const selectData = (rowKeys: any, rowKey: any, record: TableData) => {
    robotData.value.push(record);
  };

  function handleChangeVisible(list: any) {
    visible.value = !visible.value;
    if (visible.value) robotData.value = JSON.parse(JSON.stringify(list));
    else {
      robotData.value = [];
    }
  }

  function onSubmit() {
    if (robotData.value.length === 0) {
      Message.warning('请选择数据');
    } else {
      emit('userSelection', robotData.value);
    }
  }
  search();

  defineExpose({ handleChangeVisible });
</script>

<script lang="ts">
  export default {
    name: 'SelectUser',
  };
</script>

<style scoped></style>
